<template>
	<view class="container container329916">
		<view class="flex diygw-col-24">
			<u-tabs class="diygw-col-24" name="text" count="badge" font-size="28" :list="statusDatas" active-color="#07c160" inactive-color="#606266" :is-scroll="false" :current="status" @change="changeStatus"></u-tabs>
		</view>
		<u-form-item :borderBottom="false" class="diygw-col-24 title-clz diygw-form-item-small" labelPosition="top" prop="title">
			<text class="diy-icon-search margin-right-xs" style="color: #676767; font-size: 32rpx"></text>
			<u-input :focus="titleFocus" placeholder="请输入提示信息" v-model="title"></u-input>
		</u-form-item>
		<view v-if="list.total > 0" class="flex flex-wrap diygw-col-24 flex-direction-column">
			<view v-for="(item, index) in list.rows" :key="index" class="flex flex-wrap diygw-col-24 flex-direction-column items-center flex-clz">
				<view class="flex flex-wrap diygw-col-24 items-stretch flex2-clz" @tap="navigateTo" data-type="page" data-url="/pages/order/detail" :data-id="item.id">
					<text class="diygw-col-0 text-clz"> 订单编号:{{ item.orderNo }} </text>
					<text v-if="item.status == 4" class="diygw-col-0 text4-clz">
						{{ getOrderStatus(item.status) }}
					</text>
					<text v-else class="diygw-col-0 text7-clz">
						{{ getOrderStatus(item.status) }}
					</text>
				</view>
				<view v-for="(item, index) in item.body.carts" :key="index" class="flex flex-wrap diygw-col-24 items-stretch flex3-clz" @tap="navigateTo" data-type="page" data-url="/pages/goods/detail" :data-id="item.id">
					<view class="flex flex-wrap diygw-col-0 items-center flex5-clz">
						<image :src="item.img" class="image-size diygw-image diygw-col-0" mode="aspectFit"></image>
					</view>
					<view class="flex flex-wrap diygw-col-0 flex-direction-column flex6-clz">
						<text class="diygw-col-0">
							{{ item.title }}
						</text>
						<view class="flex flex-wrap diygw-col-24 justify-between items-center">
							<text class="diygw-text-line2 diygw-col-0 text3-clz"> {{ item.price }}*{{ item.number }}={{ item.total }} </text>
						</view>
					</view>
				</view>
				<view class="flex flex-wrap diygw-col-24 justify-end items-stretch flex7-clz">
					<text class="diygw-col-0"> 共{{ item.body.carts.length }}件商品，总金额：{{ item.total }} </text>
				</view>
				<view class="flex flex-wrap diygw-col-24 justify-end items-stretch flex8-clz">
					<text v-if="item.payStatus == 0" @tap="navigateTo" data-type="page" data-url="/pages/order/detail" :data-id="item.id" class="diygw-col-0 text5-clz"> 立即付款 </text>
					<text v-if="item.status == 0 && item.payStatus == 0" @tap="navigateTo" data-type="updateApi" data-status="4" :data-id="item.id" :data-index="index" class="diygw-col-0 text8-clz"> 取消订单 </text>
					<text v-if="item.status >= 2 && item.payStatus == 1" class="diygw-col-0 text9-clz"> 查看物流 </text>
					<text @tap="navigateTo" data-type="delApi" :data-index="index" :data-id="item.id" class="diygw-col-0 text10-clz"> 删除订单 </text>
				</view>
			</view>
		</view>
		<view v-if="globalData.isshow && list.code == 200 && list.total == 0" class="flex flex-wrap diygw-col-24 flex-direction-column items-center flex1-clz">
			<image src="/static/zwjl.png" class="image2-size diygw-image diygw-col-0" mode="widthFix"></image>
			<text class="diygw-col-0 text1-clz"> 暂无相关订单 </text>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: { isshow: false },
				listNum: 1,
				list: {
					rows: [
						{
							id: 0,
							title: '',
							total: '',
							body: '',
							status: 0,
							platform: '',
							openid: null,
							orderNo: '',
							transactionId: '',
							userId: 0,
							createTime: '',
							updateTime: '',
							deleteTime: null
						}
					],
					total: 0,
					code: 0,
					msg: ''
				},
				updateNum: 1,
				update: {
					code: 200,
					msg: '修改成功',
					data: {
						status: '4',
						id: '1'
					}
				},
				delNum: 1,
				del: {
					code: 200,
					msg: '删除成功'
				},
				statusDatas: [
					{ badgeBgColor: '', badgeColor: '', badge: '', text: '全部' },
					{ badgeBgColor: '', badgeColor: '', badge: '', text: '待付款' },
					{ badgeBgColor: '', badgeColor: '', badge: '', text: '待发货' },
					{ badgeBgColor: '', badgeColor: '', badge: '', text: '待收货' },
					{ badgeBgColor: '', badgeColor: '', badge: '', text: '已完成' }
				],
				status: 0,
				titleFocus: false,
				title: ''
			};
		},
		computed: {
			getOrderStatus() {
				return (status) => {
					let statusTexts = ['待支付', '待发货', '待收货', '已完成', '订单已关闭'];
					if (parseInt(status) < statusTexts.length) {
						return statusTexts[parseInt(status)];
					}
					return '';
				};
			}
		},
		onShow() {
			this.setCurrentPage(this);

			this.initShow();
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {},
			async initShow() {
				await this.statusFunction();
			},
			// 列表数据 API请求方法
			async listApi(param) {
				let thiz = this;
				param = param || {};

				//如果请求要重置页面，请配置点击附加参数refresh=1  增加判断如输入框回调param不是对象
				if (param.refresh || typeof param != 'object') {
					this.listNum = 1;
				}

				//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
				let http_url = '/shop/order/list';
				let http_data = {
					pageNum: this.listNum,
					pageSize: 10,
					title_like: param.title_like || this.title,
					isself: param.isself || '1'
				};
				let http_header = {};

				//当选项卡从第二个开始时，把状态要减少1
				if (this.status > 0) {
					http_data.status = this.status - 1;
				}

				let list = await this.$http.post(http_url, http_data, http_header, 'json');

				list.rows.forEach((item) => {
					item.body = JSON.parse(item.body);
					item.body.carts.forEach((item) => {
						item.total = item.price * item.number;
					});
				});

				let datarows = list.rows;
				if (http_data.pageNum == 1) {
					this.list = list;
				} else if (datarows) {
					let rows = this.list.rows.concat(datarows);
					list.rows = rows;
					this.list = list;
				}
				if (datarows && datarows.length > 0) {
					this.listNum = this.listNum + 1;
				}
				this.globalData.isshow = true;
			},
			// 更新订单状态 API请求方法
			async updateApi(param) {
				let thiz = this;
				param = param || {};

				//如果请求要重置页面，请配置点击附加参数refresh=1  增加判断如输入框回调param不是对象
				if (param.refresh || typeof param != 'object') {
					this.updateNum = 1;
				}

				//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
				let http_url = '/shop/order/update';
				let http_data = {
					pageNum: this.updateNum,
					pageSize: 10,
					status: param.status || '4',
					id: param.id || this.item.id || '1',
					index: param.index || this.index
				};
				let http_header = {};

				let flag = await this.showModal('确认取消订单吗？');
				if (!flag) {
					this.showToast('您已取消');
					return;
				}

				let update = await this.$http.post(http_url, http_data, http_header, 'json');

				let datarows = update.rows;
				if (http_data.pageNum == 1) {
					this.update = update;
				} else if (datarows) {
					let rows = this.update.rows.concat(datarows);
					update.rows = rows;
					this.update = update;
				}
				if (datarows && datarows.length > 0) {
					this.updateNum = this.updateNum + 1;
				}
				if (update.code != 200) {
					this.showToast(update.msg);
					return;
				}
				this.list.rows[param.index].status = '4';
				this.showToast('取消成功');
			},
			// 删除订单 API请求方法
			async delApi(param) {
				let thiz = this;
				param = param || {};

				//如果请求要重置页面，请配置点击附加参数refresh=1  增加判断如输入框回调param不是对象
				if (param.refresh || typeof param != 'object') {
					this.delNum = 1;
				}

				//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
				let http_url = '/shop/order/del';
				let http_data = {
					pageNum: this.delNum,
					pageSize: 10,
					index: param.index || this.index || '0',
					id: param.id || this.item.id
				};
				let http_header = {};

				let flag = await this.showModal('确认删除订单吗？');
				if (!flag) {
					this.showToast('您已取消');
					return;
				}

				let del = await this.$http.post(http_url, http_data, http_header, 'json');

				let datarows = del.rows;
				if (http_data.pageNum == 1) {
					this.del = del;
				} else if (datarows) {
					let rows = this.del.rows.concat(datarows);
					del.rows = rows;
					this.del = del;
				}
				if (datarows && datarows.length > 0) {
					this.delNum = this.delNum + 1;
				}
				if (del.code == 200) {
					this.list.rows.splice(param.index, 1);
					this.list.total = this.list.rows.length;
					this.showToast('删除数据成功');
				} else {
					this.showToast('删除数据失败', 'error');
				}
			},

			// 初始选中 自定义方法
			async statusFunction(param) {
				let thiz = this;
				//由于选项选择的是从0开始，当0为全部，需要对状态加1。
				if (this.globalOption.status || this.globalOption.status == 0) {
					//页面加载会有些延时
					this.$nextTick(() => {
						this.status = parseInt(this.globalOption.status);
						this.listApi({ title: this.title });
					});
				} else {
					await this.listApi({ title: this.title });
				}
			},
			changeStatus(evt) {
				this.status = evt;
				this.navigateTo({ title_like: this.title, refresh: 1, type: 'listApi' });
			}
		},
		onPullDownRefresh() {
			// 列表数据 API请求方法
			this.listNum = 1;
			this.listApi();
			// 更新订单状态 API请求方法
			this.updateNum = 1;
			this.updateApi();
			// 删除订单 API请求方法
			this.delNum = 1;
			this.delApi();

			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			// 列表数据 API请求方法
			this.listApi();
			// 更新订单状态 API请求方法
			this.updateApi();
			// 删除订单 API请求方法
			this.delApi();
		}
	};
</script>

<style lang="scss" scoped>
	.title-clz {
		background-color: #ffffff;
		margin-left: 20rpx;
		border-bottom-left-radius: 120rpx;
		box-shadow: 0rpx 0rpx 12rpx 2px rgba(219, 219, 219, 0.31);
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 120rpx;
		margin-top: 20rpx;
		border-top-right-radius: 120rpx;
		border-bottom-right-radius: 120rpx;
		margin-bottom: 20rpx;
		margin-right: 20rpx;
	}
	.flex-clz {
		background-color: #ffffff;
		margin-left: 20rpx;
		border-bottom-left-radius: 12rpx;
		box-shadow: 0rpx 0rpx 12rpx 2px rgba(219, 219, 219, 0.31);
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		margin-right: 20rpx;
	}
	.flex2-clz {
		padding-top: 20rpx;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx dotted #eee;
		padding-right: 20rpx;
	}
	.text-clz {
		flex: 1;
	}
	.text4-clz {
		color: #8a8a8a;
	}
	.text7-clz {
		color: #ff2a2a;
	}
	.flex3-clz {
		padding-top: 20rpx;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx dotted #eee;
		padding-right: 20rpx;
	}
	.flex5-clz {
		background-color: rgba(236, 236, 236, 0.37);
		border-bottom-left-radius: 12rpx;
		overflow: hidden;
		border-top-left-radius: 12rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
	}
	.image-size {
		height: 120rpx !important;
		width: 160rpx !important;
	}
	.flex6-clz {
		padding-top: 10rpx;
		flex: 1;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.text3-clz {
		padding-top: 6rpx;
		color: #ff2a2a;
		padding-left: 0rpx;
		padding-bottom: 6rpx;
		padding-right: 0rpx;
	}
	.flex7-clz {
		padding-top: 20rpx;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx dotted #eee;
		padding-right: 20rpx;
	}
	.flex8-clz {
		padding-top: 20rpx;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx dotted #eee;
		padding-right: 20rpx;
	}
	.text5-clz {
		border: 2rpx solid #ff2a2a;
		padding-top: 6rpx;
		border-bottom-left-radius: 120rpx;
		color: #ff2a2a;
		padding-left: 16rpx;
		font-size: 28rpx !important;
		padding-bottom: 6rpx;
		border-top-right-radius: 120rpx;
		margin-right: 6rpx;
		margin-left: 6rpx;
		overflow: hidden;
		border-top-left-radius: 120rpx;
		margin-top: 6rpx;
		border-bottom-right-radius: 120rpx;
		margin-bottom: 6rpx;
		padding-right: 16rpx;
	}
	.text8-clz {
		border: 2rpx solid #d9d9d9;
		padding-top: 6rpx;
		border-bottom-left-radius: 120rpx;
		padding-left: 16rpx;
		font-size: 28rpx !important;
		padding-bottom: 6rpx;
		border-top-right-radius: 120rpx;
		margin-right: 6rpx;
		margin-left: 6rpx;
		overflow: hidden;
		border-top-left-radius: 120rpx;
		margin-top: 6rpx;
		border-bottom-right-radius: 120rpx;
		margin-bottom: 6rpx;
		padding-right: 16rpx;
	}
	.text9-clz {
		border: 2rpx solid #d9d9d9;
		padding-top: 6rpx;
		border-bottom-left-radius: 120rpx;
		padding-left: 16rpx;
		font-size: 28rpx !important;
		padding-bottom: 6rpx;
		border-top-right-radius: 120rpx;
		margin-right: 6rpx;
		margin-left: 6rpx;
		overflow: hidden;
		border-top-left-radius: 120rpx;
		margin-top: 6rpx;
		border-bottom-right-radius: 120rpx;
		margin-bottom: 6rpx;
		padding-right: 16rpx;
	}
	.text10-clz {
		border: 2rpx solid #d9d9d9;
		padding-top: 6rpx;
		border-bottom-left-radius: 120rpx;
		padding-left: 16rpx;
		font-size: 28rpx !important;
		padding-bottom: 6rpx;
		border-top-right-radius: 120rpx;
		margin-right: 6rpx;
		margin-left: 6rpx;
		overflow: hidden;
		border-top-left-radius: 120rpx;
		margin-top: 6rpx;
		border-bottom-right-radius: 120rpx;
		margin-bottom: 6rpx;
		padding-right: 16rpx;
	}
	.flex1-clz {
		padding-top: 20rpx;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		padding-right: 20rpx;
	}
	.image2-size {
		height: 400rpx !important;
		width: 400rpx !important;
	}
	.text1-clz {
		color: #969696;
		font-size: 28rpx !important;
	}
	.container329916 {
		padding-bottom: 160rpx;
		background-color: #f5f5f5;
	}
</style>
